<template>
  <div class="qualityFiles-container">
    <!--
    <div
      v-for="(item, index) in qualityFile"
      :key="index"
      class="file-item"
    >
      <image-upload-view
        :ref="(e) => {imageUploadViewRef(e,index)}"
        :data="item"
        :is-toast="false"
      />
    </div>
    -->
    <files-upload-view
      ref="filesRef"
      :list="qualityFile"
    />
  </div>
</template>

<script>
import {defineComponent, inject, onMounted, reactive, ref, toRefs, watch,} from 'vue'
import {crmStore} from '@CRM/store'

export default defineComponent({
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
    types: {
      type: String,
      default: () => {},
    },
  },
  setup(props, context) {
    var api = inject('api')
    var formRef = ref(null)
    var imageViewRef = ref({})
    var filesRef = ref(null)
    var reactiveData = reactive({
      qualityFile: [],
    })
    var rules = reactive({})
    const certValidate = (callBack) => {
      formRef.value.validate(callBack)
    }
    const imageUploadViewRef = (e, index) => {
      imageViewRef.value[index] = e
    }
    // const getFileData = () => {
    //   let bol = '' // true
    //   for (var i in imageViewRef.value) {
    //     bol = imageViewRef.value[i].validateImage()
    //     console.log(bol)
    //     if (bol) {
    //       break
    //     }
    //   }
    //   return { bol: bol, files: [...reactiveData.qualityFile] }
    // }
    const getFileData = () => {
      const bol = filesRef.value.validateFiles()
      return { bol: bol, files: [...reactiveData.qualityFile] }
    }
    onMounted(() => {
      if (props.types === 'create') {
        const files =
          crmStore.getters['jsonData/getJsonData']['distribute_qualification']
            .data || []
        if (files.length) {
          reactiveData.qualityFile = JSON.parse(JSON.stringify(files))
        }
      } else if (props.types === 'edit') {
        reactiveData.qualityFile = props.detail?.qualifications || []
      }
      console.log(reactiveData.qualityFile)
    })
    watch(
      () => props.detail,
      (newval, oldval) => {
        if (newval) {
          reactiveData.qualityFile = newval?.qualifications || []
        }
      },
      { immediate: true }
    )
    return {
      ...toRefs(reactiveData),
      rules,
      formRef,
      filesRef,
      imageUploadViewRef,
      certValidate,
      getFileData,
    }
  },
})
</script>

